<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/jquery.page.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/jquery.lazyload.js"></script>
    <style>
        .first, .last{
            width:auto;
        }
    </style>
    <!--[if lt IE 9]>
        <script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <!-- header -->
    <div id="header" class="f-cb">
            <div class="logo fl">
                <a href="#">
                    <img src="./image/logo.png" alt="" width="180">
                </a>
            </div>
            <ul class="main-menu fr">
                <li class="dropdown">
                    <a href="./index.html">首页</a>
                </li>
                <li class="dropdown active">
                    <a href="#">
                        成功案例
                        <i class="iconfont">&#xe638;</i>
                    </a>
                    <ul class="subnav sub-directory">
                        <li>
                            <a href="./case.html?type=0">汉白玉石狮</a>
                        </li>
                        <li>
                            <a href="./case.html?type=1">汉白玉栏杆</a>
                        </li>
                        <li>
                            <a href="./case.html?type=2">汉白玉浮雕</a>
                        </li>
                        <li>
                            <a href="./case.html?type=3">人物雕塑</a>
                        </li>
                        <li>
                            <a href="./case.html?type=4">其他雕塑</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" >
                        定制流程
                        <i class="iconfont">&#xe638;</i>
                    </a>
                    <ul class="subnav sub-directory">
                        <li>
                            <a href="./design.html">免费设计</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#">
                        关于我们
                        <i class="iconfont">&#xe638;</i>
                    </a>
                    <ul class="subnav sub-directory">
                        <li>
                            <a href="./aboutUs_culture.html">企业文化</a>
                        </li>
                        <li>
                            <a href="./aboutUs_factory.html">厂区展示</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#footer">联系我们</a>
                </li>
                <li class="dropdown">
                    <a href="./news.html">
                        近期跟踪
                        <i class="iconfont">&#xe638;</i>
                    </a>
                </li>
            </ul>
    </div>
    <div class="placeholder"></div>
    <div class="case-container">
        <div class="banner" style="background-image:url(./image/case-banner.jpg)"></div>
        <div id="pageTarget">
            <div class="container_target" style="visibility: visible;">
                您的位置：
                <a href="./case.html?type=0">成功案例</a>&gt;
                <a href="javascript:;" class="position" style="color:#999"></a> &gt;
            </div>
        </div>
        <div class="container">
            <div class="pro-case f-cb">
                <ul class="container_category  f-cb fr">
                    <li>
                        <a href="#">
                            <span>汉白玉石狮</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>汉白玉栏杆</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>汉白玉浮雕</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>人物雕塑</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>其他雕塑</span>
                        </a>
                    </li>
                </ul>
                <div class="content_wrapper fl">
                    <ul class="content_list f-cb">
                        
                    </ul>
                    <div class="nodata">暂无数据</div>
                     <!-- 分页 -->
                    <div id="page" style="margin-top:20px;"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <!-- footer -->
    <div id="footer">
        <!-- codemodel-->
       <div class="codeModel">
           <div class="code">
               <img src="./image/code.png" alt="">
           </div>
       </div>
       <div class="footer-con w1300 f-cb">
           <ul class="fl">
               <h3>联系我们</h3>
               <li class="address">
                   地址：<span></span>
               </li>
               <li class="phone">
                   电话：<span></span>
               </li>
               <li>
                   E-mail: <span class="email"></span> QQ：<span class="qq"></span>
               </li>
               <li>
                   网址：http://www.bxxlsd.com
               </li>
           </ul>
           <ul class="contact fl">
               <h3>关注我们</h3>
               <ul class="icons f-cb">
                   <li>
                       <a href="//weibo.com/u/3541697272" target="_blank">
                           <i class="iconfont">&#xe67a;</i>
                       </a>
                   </li>
                   <li>
                       <a  class="openQQ">
                           <i class="iconfont">&#xe600;</i>
                       </a>
                   </li>
                   <li class="wexin">
                       <i class="iconfont">&#xe63f;</i>
                   </li>
               </ul>
           </ul>
           <ul class="fl">
               <h3>联系鑫利石雕</h3>
               <div id="map">

                </div>
           </ul>
       </div>
       <div class="copyRight">
           版权所有Copyright©四川宝兴鑫利石雕厂 蜀ICP备16008598号-1 友情链接: <a href="#">汉白玉雕刻（石林轩）</a>
       </div>
   </div>
    <!-- side -->
    <div class="side">
        <ul>
            <li>
                <a href="#" class="openQQ">
                    <div class="sidebox">
                        <img src="./image/side_icon01.png" alt="">
                        在线咨询
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="openQQ">
                    <div class="sidebox">
                        <img src="./image/side_icon02.png" alt="">
                        在线咨询
                    </div>
                </a>
            </li>
            <li class="phone">
                <a href="#">
                    <div class="sidebox">
                        <img src="./image/side_icon03.png" alt="">
                        <span></span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <script src="./js/common.js"></script>
    <script src="./js/jquery.page.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init"></script>
    <script src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20181212032854"></script>
    <script>
        $(function(){
            $(".container_category li a").click(function(){
                $(this).addClass('active').parents().siblings().find('a').removeClass('active');
            })
        })


    </script>
    <script>
        var obj={
            url:'http://39.108.226.146',
            type:0,
            pageNum:1,
            pageSize:20,
            isload:false,
            total:0,
            name:'',
            init(){
                this.getUrlVar('type');
                this.getData()
                this.bind();
            },
            bind(){
                var _this=this;
                $(".container_category li").click(function(e){
                    if(_this.isload==true){
                        return;
                    }
                    e.preventDefault();
                   if(_this.type==$(this).index()){
                       return;
                   }
                    _this.type=$(this).index();
                    var _text= $(this).find("span").text();
                    $(".position").text(_text);
                    _this.getData()
                })
            },
            getUrlVar(name) {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                this.type=vars[name]||0;
                $(".container_category li:eq("+(this.type)+") a").addClass('active');
                var _text= $(".container_category li:eq("+(this.type)+") span").text();
                $(".position").text(_text);
            },
            getData(){
                if(this.isload==true){
                    return;
                }
                this.isload=true;
                var _this=this;
                switch(parseInt(this.type)){
                    case 0:
                        this.name='shishi';
                        break;
                    case 1:
                        this.name="langan";
                        break;
                    case 2:
                        this.name="fudiao";
                        break;
                    case 3:
                        this.name="renwu";
                        break;
                    case 4:
                        this.name="qita";
                        break;
                    default:
                        this.name="shishi";
                }
                var _this=this;
                $.ajax({
                    url:this.url+'/user/Case',
                    type:'get',
                    data:{type:this.name,pageNum:this.pagenum,pageSize:this.pageSize},
                    success:function(res){
                        _this.isload=false;
                        res=JSON.parse(res);
                        if(res.status==0){
                            if(res.data.length==0){
                                $(".nodata").show();
                                $(".content_list").html("")
                                $("#page").hide();
                            }else{
                                _this.joinHtml(res.data);
                                _this.total=parseInt(res.msg);
                                $(".nodata").hide();
                                $("#page").show();
                                _this.page();
                            }
                        }
                    }
                })
               
            },
            initData(){
                var _this=this;
                $.ajax({
                    url:this.url+'/user/Case',
                    type:'get',
                    data:{type:this.name,pageNum:this.pagenum,pageSize:this.pageSize},
                    success:function(res){
                        _this.isload=false;
                        res=JSON.parse(res);
                        if(res.status==0){
                            if(res.data.length==0){
                                $(".nodata").show();
                                $(".content_list").html("")
                            }else{
                                _this.joinHtml(res.data);
                                _this.total=parseInt(res.msg);
                                $(".nodata").hide();
                            }
                        }
                    }
                })
            },
            joinHtml(data){
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<li class='item_block'>"
                    html+="<a href='./caseDetail.html?id="+data[i]._id+"'>"
                    html+=  "<div class='item_img'>"
                    html+=     "<img class='lazy' data-original="+data[i].imgs[0].replace('../client','http://39.108.226.146/').replace('./','http://39.108.226.146/')+" >"
                    html+=  "</div>"
                    html+=  "<div class='item_wrapper'>"
                    html+=     "<div class='item_info'><div class='text_wrap'><p class='ellipsis'>"+data[i].title+"</p><p class='ellipsis'>名称："+data[i].name+ "材料："+data[i].from+"</p></div></div>"
                    html+=  "</div>"
                    html+="</a>"
                    html+="</li>"
                }
                $(".content_list").html(html)
                $("img.lazy").lazyload();
            },
            page(){
                var _this=this;
                $("#page").Page({
                    totalPages: _this.total/_this.pageSize,//分页总数
                    liNums: 4,//the li numbers(advice use odd)
                    activeClass: 'activP', //active 类样式定义
                    prv: '«',//prev button name
                    next: '»',//next button name
                   
                    callBack : function(page){
                         _this.pagenum=page;
                         _this.initData();
                    }
                });
            }

        }
        obj.init();
    </script>
    <script>
    </script>
</body>
</html>